<template>
  <div class="life-cycles">
    <h1>生命周期</h1>
    <p>见控制台</p>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, getCurrentInstance } from 'vue'

export default {
  name: 'LifeCycles',
  data() {
    return {
      msg: this.name
    }
  },

  // 等于 beforeCreate 和 created
  setup() {
    console.log('setup')

    // 下面是 Composition API 生命周期写法
    onBeforeMount(_ => {
      console.log('onBeforeMount')
    })
    onMounted(_ => {
      console.log('onMounted')
    })
    onBeforeUpdate(_ => {
      console.log('onBeforeUpdate')
    })
    onUpdated(_ => {
      console.log('onUpdated')
    })
    onBeforeUnmount(_ => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(_ => {
      console.log('onUnmounted')
    })

    console.log(getCurrentInstance())

    return { name: 'ionluo' }
  },

  // 下面是 Options API 生命周期写法
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  // beforeDestory 改名
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  // destoryed 改名
  unmounted() {
    console.log('unmounted')
  },
}
</script>

<style>

</style>
